<template>
	<view class="">
		<view class="course" v-for="(value,index) in courses" :key="value.id" @tap="goDetails(value.id)">
			<view class="course-thumb"><image :src="value.thumb"></image></view>
			<view class="course-item">
				<view class="course-title">{{ value.title }}</view>
				<view class="course-centre">
					<view class="centre-left">
						<text class="iconfont iconsubscribe"></text>
						<text>{{ value.user_count }}</text>
					</view>
					<view class="centre-right">
						<text class="iconfont icontag1"></text>
						<text>{{ value.category.name }}</text>
					</view>
				</view>
				<view class="course-bottom">
					<text class="charge">￥{{ value.charge }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'course',
	props: {
		courses: {
			type: Array,
			required:true
		}
	},
	data() {
		return {
			
		};
	},
	methods: {
		goDetails(id){
			uni.navigateTo({
				url: '/pages/course/detail?id=' + id
			})
			// console.log(id)
		}
	}
}
</script>

<style lang="scss" scoped>
	 @import "../static/assets/fonts/iconfont.css";
.course {
	display: flex;
	// align-items: center;
	// // justify-content: center;
	// // width: 100%;
	// // height: 200rpx;
	width: 100%;
	height: auto;
	float: left;
	padding-top: 50rpx;
	// padding-bottom: 50rpx;
	.course-thumb {
		width: 200rpx;
		height: 75rpx;
		margin-right: 40rpx;
		image {
			// flex: 1;
			width: 250rpx;
			height: 180rpx;
			border-radius: 5rpx;
		}
	}
	.course-item {
		flex: 1;
		flex-direction: column;
		justify-content: space-evenly;
		margin-left: 30rpx;
		.course-title {
			width: 100%;
			height: auto;
			float: left;
			font-size: 35rpx;
			font-weight: 600;
			line-height: 35rpx;
			margin-bottom: 25rpx;
		}
	}
}
.course-centre {
	width: 100%;
	height: auto;
	font-size: 25rpx;
	float: left;
	display: flex;
	// padding: 30rpx 0;
	line-height: 25rpx;
	margin-bottom: 25rpx;
}
.course-bottom{
	width: 100%;
	height: auto;
	float: left;
	.charge{
		display: inline-block;
		width: auto;
		height: auto;
		padding-left: 20rpx;
		padding-right: 20rpx;
		background-color: #f5f5f5;
		border-radius: 25rpx;
		font-size: 25rpx;
		color: red;
	}
}
.centre-left{
	width: auto;
	margin-right: 30rpx;
	// font-size: 30rpx;
	// color: #a5a099;
	.iconsubscribe{
		font-size: 30rpx;
		margin-right: 5rpx;
	}
}
.centre-right{
	flex: 1;
	.icontag1{
		margin-right: 5rpx;
		font-size: 30rpx;
	}
}
</style>
